/*!
 * ---------------------------------------------------------------------
 *
 * GLPI - Gestionnaire Libre de Parc Informatique
 *
 * http://glpi-project.org
 *
 * @copyright 2015-2025 Teclib' and contributors.
 * @copyright 2003-2014 by the INDEPNET Development Team.
 * @licence   https://www.gnu.org/licenses/gpl-3.0.html
 *
 * ---------------------------------------------------------------------
 *
 * LICENSE
 *
 * This file is part of GLPI.
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 *
 * ---------------------------------------------------------------------
 */

@import "form-editor-horizontal-layout";

[data-glpi-form-editor-container]{
    &:not(.initialized) {
        pointer-events: none;
    }

    &:not([data-glpi-form-editor-sorting]) {
        [data-glpi-form-editor-question-drag-merge] {
            position: absolute;
        }
    }

    .form-editor-no-merge {
         [data-glpi-form-editor-question-drag-merge] {
            position: absolute !important;
        }
    }

    &[data-glpi-form-editor-sorting] {
        [data-glpi-form-editor-section-blocks] > [data-glpi-form-editor-block] {
            display: flex;
            align-items: stretch;

            [data-glpi-form-editor-question-drag-merge] {
                position: relative;
                width: 15%;
            }

            [data-glpi-form-editor-toolbar] {
                position: absolute;
                height: 0;
                width: 0;
                opacity: 0;
                visibility: hidden;
                overflow: hidden;
            }
        }
    }
}

.form-editor {
    // Use all available parent space
    flex-grow: 1;

    // Subtle gradient to avoid the same background color of the cards and tab content/editor
    background: linear-gradient(169deg,
            var(--tblr-bg-surface) 0%,
            var(--tblr-bg-surface-tertiary) 48%);

    .designer {
        .form-details {
            .card-title {
                // Emphasis form title with an above average font size
                font-size: 1.2rem !important;
            }
        }
    }

    overflow: auto;

    // Revert border radius change from parent div
    .card {
        border-bottom-left-radius: var(--tblr-border-radius) !important;
    }

    [data-fix-dropdown-flex] {
        .select2-selection__rendered {
            // Weird chrome only css issue that break select2 dropdown for
            // question type dropdowns...
            display: flex !important;
        }
    }

    .fileupload {
        margin: 0;
    }

    .only-uploaded-files {
        .fileupload_info {
            margin-bottom: 0;

            p:first-child {
                margin-top: 10px;
            }

            p:last-child {
                margin-bottom: 0;
            }
        }
    }
}

.editor-footer {
    border-top: 1px solid var(--tblr-border-color);
}

// Show required mark on mandatory question
.mandatory-question {
    [data-glpi-form-editor-required-mark] {
        display: inline !important;
    }
}

[data-glpi-form-editor-form] {
    height: fit-content;

    &[data-glpi-form-editor-active-form] {
        // Show secondary data on active form
        [data-glpi-form-editor-form-extra-details] {
            position: relative;
            opacity: 1;
            visibility: visible;
            transition: visibility 0s, opacity 0.20s linear;
        }
    }

    &:not([data-glpi-form-editor-active-form]) {
        // Do not highlight inactive forms
        [data-glpi-form-editor-active-form-status-indicator] {
            display: none;
        }

        // Do not show secondary data on inactive form
        [data-glpi-form-editor-form-extra-details] {
            position: absolute;
            height: 0;
            width: 0;
            opacity: 0;
            visibility: hidden;
            overflow: hidden;
        }
    }
}

[data-glpi-form-editor-section] {
    &[data-glpi-form-editor-active-section] {
        // Show secondary data on active form
        [data-glpi-form-editor-section-extra-details] {
            position: relative;
            opacity: 1;
            visibility: visible;
            transition: visibility 0s, opacity 0.20s linear;
        }
    }

    &:not([data-glpi-form-editor-active-section]) {
        // Do not highlight inactive forms
        [data-glpi-form-editor-active-section-status-indicator] {
            display: none;
        }

        // Do not show secondary data on inactive form
        [data-glpi-form-editor-section-extra-details] {
            position: absolute;
            height: 0;
            width: 0;
            opacity: 0;
            visibility: hidden;
            overflow: hidden;
        }
    }
}

[data-glpi-form-editor-question] {
    &[data-glpi-form-editor-active-question] {
        // Show secondary data on active form
        [data-glpi-form-editor-question-extra-details] {
            position: relative;
            opacity: 1;
            visibility: visible;
            transition: visibility 0s, opacity 0.20s linear;
        }
    }

    &:not([data-glpi-form-editor-active-question]) {
        // Do not highlight inactive forms
        [data-glpi-form-editor-active-question-status-indicator] {
            display: none;
        }

        // Do not show secondary data on inactive form
        [data-glpi-form-editor-question-extra-details] {
            position: absolute;
            height: 0;
            width: 0;
            opacity: 0;
            visibility: hidden;
            overflow: hidden;
        }

        // Hide tinymce toolbar on inactive questions
        .tox-editor-header {
            display: none !important;
        }
    }
}

[data-glpi-form-editor-comment] {
    &[data-glpi-form-editor-active-comment] {
        // Show secondary data on active comments
        [data-glpi-form-editor-comment-extra-details] {
            position: relative;
            opacity: 1;
            visibility: visible;
            transition: visibility 0s, opacity 0.20s linear;
        }
    }

    &:not([data-glpi-form-editor-active-comment]) {
        // Do not highlight inactive comments
        [data-glpi-form-editor-active-comment-status-indicator] {
            display: none;
        }

        // Do not show secondary data on inactive comments
        [data-glpi-form-editor-comment-extra-details] {
            position: absolute;
            height: 0;
            width: 0;
            opacity: 0;
            visibility: hidden;
            overflow: hidden;
        }
    }
}

.glpi-form-editor-drag-question-placeholder {
    border: 2px dashed var(--tblr-primary);
    background: rgb(var(--tblr-primary), 0.1);
    opacity: 0.5;
}

[data-glpi-form-editor-section-blocks] {
    .glpi-form-editor-drag-question-placeholder {
        margin-bottom: 1rem;
        height: 70px !important;
    }
}

[data-glpi-form-editor-question-drag-merge] {
    .glpi-form-editor-drag-question-placeholder {
        height: 100% !important;
        margin-left: 0.5rem;
    }
}

.glpi-form-editor-drag-question-option-placeholder {
    border: 2px dashed var(--tblr-primary);
    background: rgb(var(--tblr-primary), 0.1);
    opacity: 0.5;
    height: 40px !important;
}

.glpi-form-editor-drag-section-placeholder {
    border: 2px dashed var(--tblr-primary);
    background: rgb(var(--tblr-primary), 0.1);
    opacity: 0.5;
    height: 60px !important;
}

// Hide handle until question is hovered
.glpi-form-editor-question-handle {
    opacity: 0;
}

[data-glpi-form-editor-question-details],
[data-glpi-form-editor-comment-details] {
    &:hover {
        .glpi-form-editor-question-handle {
            opacity: 0.7;
        }
    }
}

// Hide content of collapsed sections
[data-glpi-form-editor-section].section-collapsed {
    [data-glpi-form-editor-section-description],
    [data-glpi-form-editor-section-blocks],
    [data-glpi-form-editor-section-extra-details] {
        display: none;
    }

    margin-bottom: 1rem !important;
}

// Hide question badge in section when section is not collapsed
[data-glpi-form-editor-section]:not(.section-collapsed) {
    [data-glpi-form-editor-section-block-badge] {
        display: none;
    }
}

[data-glpi-form-editor-question] {
    &[data-glpi-form-editor-active-question] {
        .dropdown-border {
            position: relative;
            border: 1px solid var(--tblr-border-color);
            border-top: 0;
            border-bottom-left-radius: var(--tblr-border-radius);
            border-bottom-right-radius: var(--tblr-border-radius);
            padding: 0.5rem;
            padding-bottom: 0;
        }

        .single-preview-dropdown, .multiple-preview-dropdown {
            .select2-selection {
                border-bottom-left-radius: unset;
                border-bottom-right-radius: unset;
            }
        }

        div:not([data-glpi-form-editor-selectable-question-options])>[data-glpi-form-selectable-question-option]:last-child {
            margin-bottom: 0 !important;
        }
    }

    &:not([data-glpi-form-editor-active-question]) {
        [data-glpi-form-editor-selectable-question-options] {
            [data-glpi-form-selectable-question-option]:last-child {
                margin-bottom: 0 !important;
            }
        }
    }
}

.logic-operator-selector .select2-selection {
    border: 0 !important;
    background-color: var(--tblr-pink-lt) !important;

    // Fix some border conflicts with tabler/select2
    border-top-right-radius: var(--tblr-border-radius) !important;
    border-bottom-right-radius: var(--tblr-border-radius) !important;
}

.question-selector .select2-selection {
    border: 0 !important;
    background-color: var(--tblr-indigo-lt) !important;

    // Fix some border conflicts with tabler/select2
    border-top-right-radius: var(--tblr-border-radius) !important;
    border-bottom-right-radius: var(--tblr-border-radius) !important;
}

.value-operator-selector .select2-selection {
    border: 0 !important;
    background-color: var(--tblr-teal-lt) !important;

    // Fix some border conflicts with tabler/select2
    border-top-right-radius: var(--tblr-border-radius) !important;
    border-bottom-right-radius: var(--tblr-border-radius) !important;
}

input.value-selector {
    // Use extra padding to match height of dropdowns on the same line.
    padding-top: 10px;
    padding-bottom: 10px;
}

.value-selector {
    border: 0 !important;
    background-color: var(--tblr-yellow-lt) !important;
    border-radius: var(--tblr-border-radius) !important;

    .select2-selection {
        // Fix some border conflicts with tabler/select2
        border-top-right-radius: var(--tblr-border-radius) !important;
        border-bottom-right-radius: var(--tblr-border-radius) !important;
        border: 0 !important;
        background-color: var(--tblr-yellow-lt) !important;
    }

    .select2-container {
        width: 100%;
    }
}

.visibility-dropdown-card, .validation-dropdown-card {
    min-width: 700px;
    width: fit-content;

    // Add scrolling as a last ressort, will not happen most of the time
    overflow: scroll;
}

[data-glpi-form-editor-block] {
    margin-bottom: 1rem;
}

.question-type-dropdown-group {
    @include media-breakpoint-up(sm) {
        display: flex;
        flex-wrap: wrap;

        &:not(:has(> :nth-child(2).d-none)) {
            > div:not(:only-child) {
                &:first-child {
                    .select2-selection {
                        border-top-right-radius: 0;
                        border-bottom-right-radius: 0;
                    }
                }

                &:not(:first-child) {
                    margin-left: calc(-1 * var(--tblr-border-width));

                    .select2-selection {
                        border-top-left-radius: 0;
                        border-bottom-left-radius: 0;
                    }
                }
            }
        }

        &:not(:has(> :nth-child(3).d-none)) {
            > div:not(:only-child) {
                &:not(:first-child) {
                    &:not(:last-child) {
                        .select2-selection {
                            border-top-right-radius: 0;
                            border-bottom-right-radius: 0;
                        }
                    }
                }
            }
        }
    }

    @include media-breakpoint-down(sm) {
        width: 100%;

        .select2-container {
            width: 100% !important;
        }

        .select2-selection__rendered > span {
            margin-right: auto;
        }

        &:not(:has(> :nth-child(2).d-none)) {
            > div:not(:only-child) {
                &:first-child {
                    .select2-selection {
                        border-bottom-left-radius: 0;
                        border-bottom-right-radius: 0;
                    }
                }

                &:not(:first-child) {
                    margin-top: calc(-1 * var(--tblr-border-width));

                    .select2-selection {
                        border-top-left-radius: 0;
                        border-top-right-radius: 0;
                    }
                }
            }
        }

        &:not(:has(> :nth-child(3).d-none)) {
            > div:not(:only-child) {
                &:not(:first-child) {
                    &:not(:last-child) {
                        .select2-selection {
                            border-bottom-left-radius: 0;
                            border-bottom-right-radius: 0;
                        }
                    }
                }
            }
        }
    }
}

.question-type-dropdown-group-dropdown-select {
    width: min-content !important;
}

// Fix a weird scrolling issue on the form editor where the body scrolls instead of the form editor
html {
    // Only apply the overflow hidden on the body when active tab contains the form editor
    &:has(.tab-pane.active > [data-glpi-form-editor-container]) {
        overflow: hidden;
    }
}


[data-glpi-form-editor-toolbar].btn-group-vertical {
    &::before {
        content: "\ea7c";
        font-family: tabler-icons !important;
        font-size: x-large;
        color: var(--tblr-border-active-color);
        transform: translateY(1.9rem);
        position: absolute;
    }
}

[data-glpi-form-editor-visibility-dropdown-container], [data-glpi-form-editor-validation-dropdown-container] {
    padding-right: 0.75rem;

    &:has([data-glpi-editor-visibility-badge="always_visible"].d-flex,
          [data-glpi-editor-validation-badge="no_validation"].d-flex,
          button[aria-expanded="true"]) {
        padding-right: 0;

        [data-glpi-editor-visibility-conditions-count-badge],
        [data-glpi-editor-validation-conditions-count-badge] {
            display: none !important;
        }
    }
}

[data-glpi-form-editor-active-question]:has([data-glpi-form-editor-advanced-question-configuration]) {
    .input-group > * {
        &:first-child:has(.select2-selection) {
            .select2-selection {
                border-top-right-radius: 0 !important;
                border-bottom-right-radius: 0 !important;
            }
        }
    }
}

// Remove margins when form is empty
[data-glpi-form-editor-form] {
    &:not(:has([data-glpi-form-editor-block], [data-glpi-form-editor-horizontal-blocks-container])) {
        > [data-glpi-form-editor-form-extra-details] {
            margin-bottom: 0 !important;
        }

        [data-glpi-form-editor-section], [data-glpi-form-editor-section-blocks] {
            margin-top: 0 !important;
        }
    }
}

// Hide section and toolbar container when section is hidden
div:has(> [data-glpi-form-editor-section-details].d-none) {
    display: none !important;
}
